import React, { Component, PropTypes } from 'react'
import classNames from 'classnames'
import { Link } from 'react-router'

class Clear extends Component {
	 constructor(props) {
		super(props);
		this.state = {
				name:"",
				img:"",
				desc:"",
				skus:[],
				addressInfo:{
					id:"",
					tel:"",
					name:"",
					address:""
				}
			}
		}
	componentDidMount() {
		var _this=this;
		var id=this.props.params.id;
       apiInfo({path: '/v1/goods/'+this.props.params.id+'/detail', method: 'get'}).then((data) => {
		   var addressObject=data.addressInfo?data.addressInfo:false
          _this.setState({
			  	name:data.goodsName,
				img:data.goodsImg,
				desc:data.goodsDesc,
				skus:data.skuList,
				point:store.get("integralValue"),
				payNum:store.get("amount"),
				addressInfo:addressObject
		  })

        })
  	}
	  checkSku(id){
		this.setState({
			skuId:id
		});
	  }
	  clear(){
		  var _this=this;
		  var id=this.props.params.id;
		 apiInfo({path: '/clear.json', method: 'get',params:{id:id,skuId:this.state.skuId,actId:1,goodsId:this.props.params.id,num:1,logisticsInfo:{name:store.get("name"),mobile:store.get("mobile"),areaId:store.get("areaId"),zipCode:"",address:store.get("address")}}}).then((data) => {
			 if(data.state){
				_this.props.history.push("/success/1");
			 }else{
				//信息提示失败！
			 }

        })
	  }
	render() {
		var _this=this;
		return (
			<div id="Clear" className="hasstyle">
				<div className="img">
					<img src={this.state.img}/>
					<div>
						<span>{this.state.name}</span>
						<span>{this.state.desc}</span>
					</div>
				</div>
				<div className="sku">
					<p>选择色彩</p>
					<div>
						{this.state.skus.length!=0&&this.state.skus.map(function(o){
							return <span key={o.id} className={classNames({'checked': _this.state.skuId == o.id})} onClick={_this.checkSku.bind(_this,o.id)}>{o.name}</span>
						})}

					</div>
				</div>
				<div className="fee">
					购买数量：积分兑换限购1件
				</div>
				<div className="address">
					{this.state.addressInfo?<div className="default-address">
							<div className="address-info">
								<span>收货人：{this.state.addressInfo.name}</span>
								<span>{this.state.addressInfo.tel} <Link to="/addressadd">></Link></span>
							</div>
							<div className="address-desc">{this.state.addressInfo.address}</div>
						</div>:<div className="no-address">
						<div>添加地址</div>
						<div>></div>
					</div>}


				</div>
				<div className="fee">
					运费：免运费
				</div>
				<div className="total">
					<div>消费积分：<span>{this.state.point}</span></div>
					<div>现金支付：<span>￥{this.state.payNum}</span></div>
				</div>
				<div className="commit">
					<a className={classNames({'disabled': !_this.state.skuId||!_this.state.addressInfo})} onClick={this.clear.bind(this)}>确认支付</a>
				</div>
			</div>
		)
	}
}

export default Clear